<template>
  <div>
    <div class="header">
      <div class="header-left icon iconfont icon-back"></div>
      <div class="header-input">搜索</div>
      <router-link to="/city">
        <div class="header-right">{{this.city}}<i class="icon iconfont icon--xialajiantou"></i></div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'homeHeader',
  computed: {
    ...mapState(['city'])
  }
}
</script>

<style scoped>
  .header{width: 100%;line-height:43px;overflow: hidden;background: #00bcd4;color: #fff}
  .header-right,.header-input,.header-left{float: left;}
  .header-left{width: 15%;text-align: center;font-size: 26px;}
  .header-right{width: 28%;text-align: center;color: #fff}
  .header-input{width:57%;background: #fff;border-radius: 5px;line-height: 33px;margin-top: 5px}
</style>
